<template xmlns:s-identify="http://www.w3.org/1999/html">
  <div class="login-container" id="logo">

    <el-card class="login-box">

      <template slot="header">
        茶百道奶茶-系统登录
      </template>

      <el-form>
        <el-form-group>
          <el-form-item label="用户名" label-width="80px">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-form-group>

        <el-form-group>
          <el-form-item label="密码" label-width="80px">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
        </el-form-group>

         <el-form-item label="验证码" label-width="80px" prop="verificationCode">
           <el-input v-model="form.verificationCode" placeHolder="请输入验证码" clearable style="width: 200px"/>
           <div @click="refreshCode" style="margin-top: 20px">
             <s-identify :identifyCode="identifyCode"></s-identify>
           </div>
         </el-form-item>
        <el-form-group>
          <el-button @click="loginHandle" type="success">登录</el-button>
        </el-form-group>

      </el-form>

    </el-card>
    <div v-show="errMsg.isShow">{{errMsg.message}}</div>
  </div>
</template>

<script>
  import SIdentify from "./Sldentify";
  export default {
    name: "Login3",
    components: {SIdentify},
    data() {
      return {
        form: {
          username: '',
          password: ''
        }, errMsg: {
          message: '用户名或密码错误',
          isShow: false
        },
        identifyCodes:'123456789zbcdefghijklmnopqrstuvwxyz',
      }
    }, methods: {
      refreshCode(){
        this.identifyCode = ''
        this.makeCode(this.identifyCode,4)
      },
      makeCode(o,l){
        for (let i =0;i<l;i++){
          this.identifyCode+=this.identifyCode[this.randomNum(0,this.identifyCode)]
        }
      },
      randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min)
      },
      mounted(){
        this.identifyCode=''
        this.makeCode(this.identifyCode,4)
      },
      loginHandle() {
        var _this = this;
        this.axios({
          url: 'http://localhost:3000/user/login',
          method: 'get',
          params: {
            username: this.form.username,
            password: this.form.password
          }
        }).then(function (res) {
          if (res.data.flag) {
            _this.$router.push('/layout')
          } else {
            _this.$message({
              type: 'error',
              message: '用户名或密码错误！'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login-box {
    width: 460px;
    margin-left: 500px;
    margin-top: 200px;
  }
  #logo{
    background: url("../../assets/bg5.jpg");
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%;
  }
  .el-button{
    margin-left: 60px;
    width: 80%;
  }

</style>
